<template>
  <view>
    <view class="pageHeader">
      <view class="search">
        <view class="searchBox">
          <i class="iconfont icon-search"></i>
          <input
            class="inp"
            v-model="value"
            placeholder="请输入店铺名称搜索"
            @confirm="(e) => Emit.$emit('handle', 'name', e.detail.value)"
          />
        </view>
      </view>

      <view class="filter">
        <view
          :class="['filterItem', searchValue === item.id ? 'active' : '']"
          v-for="(item, index) of searchTypes"
          :key="index"
          @click="changeFilter(item)"
        >
          <view v-if="index != 3">{{ getName(item.id) }}</view>
          <view v-else>{{ item.name }}</view>
          <i class="iconfont icon-arrow-down-filling"></i>
        </view>
      </view>
    </view>

    <u-popup
      @close="searchValue = ''"
      v-model="showType"
      mode="top"
      z-index="9"
      border-radius="30"
    >
      <scroll-view class="scroll-view" :style="[popStyle]" scroll-y>
        <view v-if="searchValue === 'category'" class="popList">
          <view
            :class="['item', params.cat_id === item.id ? 'active' : '']"
            v-for="item of params.cate"
            :key="item.id"
            @click="Emit.$emit('handle', 'cat_id', item.id)"
          >
            {{ item.name }}

            <i
              v-if="params.cat_id === item.id"
              class="iconfont icon-seleted"
            ></i>
          </view>
        </view>

        <view v-if="searchValue === 'sort'" class="popList">
          <view
            :class="['item', params.sort === item.id ? 'active' : '']"
            v-for="item of params.sortList"
            :key="item.id"
            @click="Emit.$emit('handle', 'sort', item.id)"
          >
            {{ item.name }}

            <i v-if="params.sort === item.id" class="iconfont icon-seleted"></i>
          </view>
        </view>

        <view v-if="searchValue === 'distance'" class="popScrollBox">
        <!--  <view class="let">
            <scroll-view scroll-y>
              <view
                :class="[
                  'popScrollBoxItem',
                  distanceIndex === '' ? 'active' : '',
                ]"
                @click="Emit.$emit('handle', 'openDistance')"
                >附近</view
              >
            </scroll-view>
          </view> -->
          <view class="rig" v-if="distanceIndex === ''">
            <scroll-view scroll-y>
              <view class="popList">
                <view
                  :class="['item', item.id === params.distance ? 'active' : '']"
                  v-for="(item, index) of list"
                  :key="index"
                  @click="Emit.$emit('handle', 'distance', item.id)"
                  >{{ item.name }}
                  <i
                    class="iconfont icon-seleted"
                    v-if="item.id === params.distance"
                  ></i
                ></view>
              </view>
            </scroll-view>
          </view>
        </view> 
      </scroll-view>
    </u-popup>
  </view>
</template>

<script>
export default {
  components: {},
  props: {
    params: {
      type: Object,
      default() {
        return {
          cate: [],
          cat_id: "",
          sortList: [],
          sort: "",
          filterList: [],
          time_type: "",
          distance_id: "",
          distance: "",
        };
      },
    },
  },

  data() {
    return {
      value: "",

      searchTypes: [
        {
          id: "category",
        },
        {
          id: "distance",
        },
        {
          id: "sort",
        }
      ],

      searchValue: "",
      showType: false,
      popStyle: {
        "margin-top": `188rpx`,
        "max-height": "800rpx",
        "overflow-y": "auto",
      },
      index: "",
      distanceIndex: "",

      list: [
        { name: "附近", id: "0" },
        { name: "500m", id: "500m" },
        { name: "1km", id: "1km" },
        { name: "3km", id: "3km" },
        { name: "5km", id: "5km" },
        { name: "10km", id: "10km" },
      ],
    };
  },

  computed: {
    getName() {
      return (name) => {
        let {
            cat_id,
            cate,
            sortList,
            sort,
            distance_id,
            distance,
          } = this.params,
          str = "",
          item;

        switch (name) {
          case "distance":
          
              item = distance === "0" ? "附近" : distance;
            
            str = item;
            break;

          case "sort":
            item = sortList.find((el) => el.id === sort);
            str = item ? item.name : "智能排序";
            break;

          case "category":
            item = cate.find((el) => el.id === cat_id);
            str = item ? item.name : "全部商家";
            break;
        }

        return str;
      };
    },
  },

  methods: {
    changeFilter(item) {
      let searchValue = "",
        showType = false;
      if (this.searchValue !== item.id) {
        showType = true;
        searchValue = item.id;
      }
      this.searchValue = searchValue;
      this.showType = showType;
    },

    change(index) {
      let i = "";
      if (index !== this.index) i = index;

      this.index = index;
    },
  },

  mounted() {
  
  },
};
</script>

<style lang="less" scoped>
.pageHeader {
  position: relative;
  z-index: 99;
}

.search {
  padding: 18rpx 24rpx;
  height: 100rpx;
  background: #fff;
}

.searchBox {
  position: relative;
  display: flex;
  border-radius: 32px;
  background: #f2f2f2;

  .iconfont {
    position: absolute;
    left: 14rpx;
    top: 50%;
    transform: translateY(-50%);
    font-size: 46rpx;
    color: #9b9b9b;
  }

  .inp {
    flex: 1;
    overflow: hidden;
    padding: 0 20rpx 0 62rpx;
    height: 64rpx;
  }
}

.filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 24rpx;
  overflow: hidden;
  height: 88rpx;
  background: linear-gradient(180deg, #ffffff 0%, #f2f2f2 100%);
}

.filterItem {
  display: flex;
  align-items: center;
  
  height: 88rpx;
  font-size: 24rpx;
  color: #666;

  &.active {
    color: #f0250e;

    .icon-arrow-down-filling {
      transform: rotate(180deg);
      color: #f0250e;
    }
  }

  .icon-arrow-down-filling {
    margin-left: 8rpx;
    font-size: 20rpx;
    color: #dbdbdb;
  }
}

.popList {
  .item {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 30rpx;
    height: 80rpx;
    font-size: 26rpx;
    color: #262626;

    &.active {
      color: #f0250e;
	  .iconfont{
		  background-color: #f0250e;
		  border-radius: 50%;
		  color: #fff;
	  }
    }
  }
}

.popScrollBox {
  display: flex;
  height: 750rpx;
  background: #ffffff;
  border-radius: 0rpx 0rpx 20rpx 20rpx;

  .let {
    width: 250rpx;
    height: 100%;
    background: #f2f2f2;
  }

  .rig {
    height: 100%;
    flex: 1;
    overflow: hidden;
  }

  scroll-view {
    height: 100%;
    overflow-y: auto;
  }

  .popScrollBoxItem {
    padding: 0 30rpx;
    height: 72rpx;
    line-height: 72rpx;
    font-size: 26rpx;
    color: #262626;

    &.active {
      background: #fff;
      font-weight: bold;
    }
  }
}

.form-btn {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  padding: 16rpx 30rpx;
  border-top: 1px solid #f8f8f8;
  .line {
    width: 34rpx;
  }

  .btn {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    overflow: hidden;
    height: 80rpx;
    background: #f2f2f2;
    border-radius: 32px;
    font-weight: bold;
    color: #262626;
    font-size: 32rpx;

    &.btn2 {
      background: #f0250e;
      color: #fff;
    }
  }
}

.filterCon {
  padding: 18rpx 30rpx;
}

.popTitle {
  padding-bottom: 8rpx;
  font-size: 26rpx;
  font-weight: bold;
}

.timeList {
  display: flex;
  flex-wrap: wrap;

  .item {
    width: 25%;
    padding: 6rpx;

    view {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 58rpx;
      background: #f8f8f8;
      border-radius: 10rpx;
      font-size: 24rpx;
      color: #262626;
    }

    &.active {
      view {
        background: #f0250e;
        color: #fff;
      }
    }
  }
}
</style>
